<template>
  <div style="height: 75px;">

  </div>
  <div class="container">
    <div class="body">
      <div>
        <h1 class="logo_title">代码分析系统官网</h1>
        <ul class="menu_list">
          <li v-for="item in menuComputed" @click="openRouter(item.value)" :class="route.fullPath === item.value ? 'active': ''">{{ item.name }}</li>
        </ul>
      </div>
<!--      <div style="color: #fff">{{ user.token }}</div>-->
      <a-button type="primary" class="login-btn-class" v-if="!user.token" @click="openRouter('/login')">登录</a-button>
      <div v-else class="user_info">
        <img :src="prefix + user.user.avatar">
        <p>{{ user.user.username }}</p>
      </div>
    </div>
  </div>
  <!-- 组件 -->
  <a-modal v-model:open="open" title="登录/注册" @ok="handleOk" cancelText="关闭" :okText="activeKey === 'login' ? '登录' : '注册'"
    :maskClosable="false">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="login" tab="登录">
        <login />
      </a-tab-pane>
      <a-tab-pane key="register" tab="注册" force-render>
        <register ref="registerRef" />
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script setup>
import {computed, defineAsyncComponent, onMounted, ref} from 'vue'
import {useUser} from "@/store/index.js";
import { enroll } from "@/api/user.js";
import { message } from "ant-design-vue";
const Register = defineAsyncComponent(() => import('@/components/register.vue'))
const Login = defineAsyncComponent(() => import('@/components/login.vue'))
import { useRoute, useRouter } from "vue-router";
import gsap from 'gsap'
const route = useRoute()
const open = ref(false)
const activeKey = ref('login')
const registerRef = ref()
const user = useUser()
const prefix = import.meta.env.VITE_IMG_PATH
const handleOk = () => {
  const { formRef, codeStr } = registerRef.value
  console.log(registerRef.value, 'registerRef.value')
  formRef.validate()
    .then((res) => {
      return enroll({ ...res, avatar: res.avatar[0].response.data.fileName, codeStr: codeStr.imgStr });
    }).then(({ data }, code) => {
      if (code !== 200) {
        message.error(data.message)
      } else {
        message.success(data.message)
      }
    })
    .catch(error => {
      console.log('error', error);
    });
}

const menuList = ref(
  [
    { name: '首页', value: '/' },
    { name: '登录', value: '/login' },
    { name: '注册', value: '/register' },
    { name: '下单', value: '/order' },
    { name: '分析进度', value: '/progress' },
    // { name: '分析结果', value: '/result' },
    { name: '我的订单', value: '/myOrder' }
  ]
)

const menuComputed = computed(() => {
  return menuList.value.filter(i => {
    return !(i.value === '/login' && user.token);
  })
})
onMounted(() => {
  gsap.from('.logo_title', {
    opacity: 0,
    duration: 1.8,
    scale: 1.8,
  })
  gsap.from('.menu_list li', {
    stagger: 0.3,
    x: 300,
    direction: 1,
    opacity: 0,
  })
})
const router = useRouter();
const openRouter = (routerPath) => {
  router.push(routerPath)
}
</script>

<style scoped lang="scss">
.user_info {
  display: flex;
  color: #fff;
  img {
    width: 40px;
    height: 40px;
    border: 2px solid #fff;
    border-radius: 50%;
    margin-right: 10px;
  }
}
.container {
  height: 75px;
  background: #000;
  position: fixed;
  z-index: 99;
  top: 0;
  width: 100%;
  left: 0;

  .body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999999;

    >div {
      display: flex;
      align-items: center;

      h1 {
        font-size: 22px;
        font-weight: bold;
        color: #fff;
      }

      .menu_list {
        margin-left: 62px;
        display: flex;
        align-items: center;
        color: #fff;

        li {
          padding: 5px 10px;
          cursor: pointer;
          margin-right: 32px;
          border-radius: 10px;
          border: 2px solid transparent;
          &.active {
            transition: color 1s;
            color: rgb(255, 215, 0);
          }

          &:hover {
            transition: border 1s;
            border: 2px solid #c4c4c4;
          }
        }
      }
    }
  }
}

.login-btn-class {
  background: rgba(255, 215, 0, 1);
  color: black;
}
</style>